<template>
  <border-box8 style="width: 460px; height: 290px">
    <div class="spotRate">
      <a-select
        v-model:value="month"
        style="width: 120px; position: absolute; top: -35px; left: 130px"
        @change="handleChange"
        size="small"
      >
        <a-select-option :value="item.dt" v-for="item in list" :key="item.dt">
          {{ item.dt }}
        </a-select-option>
      </a-select>
      <div style="position: absolute; top: 1%; left: 35%; z-index: 10">
        <svg
          t="1733900006384"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8283"
          id="mx_n_1733900006384"
          width="36"
          height="36"
        >
          <path
            d="M988.484143 487.734885l-60.328305 0c-2.675852-47.800451-13.379261-94.262977-32.110227-138.292909-21.041929-49.624896-51.084452-94.141347-89.276161-132.454686-38.313339-38.313339-82.82979-68.355862-132.454686-89.276161-44.029932-18.609336-90.492458-29.434375-138.292909-32.110227L536.021855 35.150968l-1.946074 0-43.786673 0-1.946074 0 0 60.328305c-47.800451 2.675852-94.262977 13.500891-138.292909 32.110227-49.624896 21.041929-94.141347 51.084452-132.454686 89.276161S148.996318 299.695451 127.954389 349.320347c-18.609336 44.029932-29.434375 90.492458-32.110227 138.292909L35.515857 487.613256l0 47.800451 60.449935 0c2.675852 47.800451 13.500891 94.262977 32.110227 138.292909 21.041929 49.624896 51.084452 94.141347 89.276161 132.454686 38.313339 38.313339 82.82979 68.355862 132.454686 89.276161 44.029932 18.609336 90.492458 29.434375 138.292909 32.110227l0 60.449935 1.946074 0 43.786673 0 1.946074 0 0-60.449935c47.800451-2.675852 94.262977-13.379261 138.292909-32.110227 49.624896-21.041929 94.141347-51.084452 132.454686-89.276161 38.313339-38.313339 68.355862-82.82979 89.276161-132.454686 18.609336-44.029932 29.434375-90.492458 32.110227-138.292909l60.328305 0L988.240884 487.734885 988.484143 487.734885zM860.164865 487.734885l-103.50683 0c-5.473334-56.679416-30.164153-109.223423-70.910084-149.969355-40.745932-40.745932-93.289939-65.43675-149.969355-70.910084l0-103.50683C709.344103 175.146692 848.366789 314.291008 860.164865 487.734885L860.164865 487.734885zM511.939185 709.587362c-109.223423 0-198.013066-88.789642-198.013066-198.013066 0-109.223423 88.789642-198.013066 198.013066-198.013066 109.223423 0 198.013066 88.789642 198.013066 198.013066C709.952251 620.797719 621.162608 709.587362 511.939185 709.587362L511.939185 709.587362zM488.099774 163.348616l0 103.50683c-56.679416 5.473334-109.223423 30.164153-149.969355 70.910084C297.384487 378.511462 272.693669 431.05547 267.341965 487.734885L163.713505 487.734885C175.511581 314.291008 314.655897 175.146692 488.099774 163.348616L488.099774 163.348616zM163.713505 535.535337l103.50683 0c5.473334 56.679416 30.164153 109.223423 70.910084 149.969355 40.745932 40.745932 93.289939 65.43675 149.969355 70.910084l0 103.50683C314.655897 848.0019 175.511581 708.979214 163.713505 535.535337L163.713505 535.535337zM535.900226 859.799976l0-103.50683c56.679416-5.473334 109.223423-30.164153 149.969355-70.910084 40.745932-40.745932 65.43675-93.289939 70.910084-149.969355L860.164865 535.413707C848.366789 708.979214 709.344103 848.0019 535.900226 859.799976L535.900226 859.799976z"
            p-id="8284"
            fill="#9392D1"
          ></path>
          <path
            d="M511.939185 511.574296 511.939185 511.574296zM431.785248 511.574296 431.785248 511.574296z"
            p-id="8285"
            fill="#9392D1"
          ></path>
        </svg>
        <span
          style="
            font-size: 18px;
            color: #fff;
            position: absolute;
            top: 20%;
            width: 200px;
          "
        >
          {{ "大盘现货率" + "：" + (all == undefined ? "0%" : all) }}
        </span>
      </div>
      <a-tooltip overlayClassName="tooltipColor">
        <template #title>
          <div>
            {{ "CA" + "：" + ca }}
          </div>
        </template>
        <svg
          style="
            position: absolute;
            top: 42%;
            left: 11%;
            z-index: 10;
            cursor: pointer;
          "
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1156"
          width="32"
          height="32"
        >
          " t="1733886765719" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="4671" width="32" height="32">
          <path
            d="M511.997542 0A350.50496 350.50496 0 0 0 265.909862 597.62688L511.997542 845.2096l246.14912-247.58272A350.50496 350.50496 0 0 0 511.997542 0.06144z m0 505.63072a155.12576 155.12576 0 0 1-154.73664-155.51488v-0.13312a155.06432 155.06432 0 0 1 154.624-155.51488h0.06144a155.12576 155.12576 0 0 1 154.78784 155.51488v0.13312a155.06432 155.06432 0 0 1-154.54208 155.45344h-0.19456zM357.260902 958.98624c0 35.91168 69.2736 65.01376 154.73664 65.01376s154.73664-29.11232 154.73664-65.01376-69.28384-65.01376-154.73664-65.01376-154.73664 29.10208-154.73664 65.01376z"
            fill="#9392D1"
            p-id="4672"
          ></path>
        </svg>
      </a-tooltip>
      <a-tooltip overlayClassName="tooltipColor">
        <template #title>
          <div>
            {{ "NJ" + "：" + nj }}
          </div>
        </template>
        <svg
          style="
            position: absolute;
            top: 30%;
            left: 82%;
            z-index: 10;
            cursor: pointer;
          "
          t="1733886765719"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4671"
          width="32"
          height="32"
        >
          <path
            d="M511.997542 0A350.50496 350.50496 0 0 0 265.909862 597.62688L511.997542 845.2096l246.14912-247.58272A350.50496 350.50496 0 0 0 511.997542 0.06144z m0 505.63072a155.12576 155.12576 0 0 1-154.73664-155.51488v-0.13312a155.06432 155.06432 0 0 1 154.624-155.51488h0.06144a155.12576 155.12576 0 0 1 154.78784 155.51488v0.13312a155.06432 155.06432 0 0 1-154.54208 155.45344h-0.19456zM357.260902 958.98624c0 35.91168 69.2736 65.01376 154.73664 65.01376s154.73664-29.11232 154.73664-65.01376-69.28384-65.01376-154.73664-65.01376-154.73664 29.10208-154.73664 65.01376z"
            fill="#9392D1"
            p-id="4672"
          ></path>
        </svg>
      </a-tooltip>
    </div>
  </border-box8>
</template>

<script setup>
import borderBox8 from "@/components/bigData/component/borderBox8/index.vue";
import { getSpotRate } from "@/api/bigData/spotRate.js";
import { message } from "ant-design-vue";
const nj = ref("");
const ca = ref("");
const all = ref("");
const list = ref([]);
const month = ref("");
const handleChange = (e) => {
  let obj = list.value.find((item) => {
    return item.dt === e;
  });
  nj.value = obj.NJ_stock_rate;
  ca.value = obj.CA_stock_rate;
  all.value = obj.ALL_stock_rate;
};
const init = async () => {
  try {
    const res = await getSpotRate();
    console.log("result", res);
    list.value = res.result.records;
    nj.value = res.result.records[0].NJ_stock_rate;
    ca.value = res.result.records[0].CA_stock_rate;
    all.value = res.result.records[0].ALL_stock_rate;
    month.value = res.result.records[0].dt;
  } catch (e) {
    message.error(e);
  }
};
onMounted(() => {
  init();
});
defineExpose({
  init,
});
</script>

<style scoped lang="less">
.spotRate {
  width: 98.5%;
  height: 98%;
  top: 1%;
  left: 1%;
  background-image: url("@/assets/kanban/usaMap.jpg");
  background-position: center;
  background-size: cover;
  position: absolute;
}
</style>
<style lang="less" scoped>
.tooltipColor {
  .ant-tooltip-inner {
    // 这里是框框
    font-weight: bold !important;
    background-color: rgb(8, 56, 108) !important;
  }

  .ant-tooltip-arrow::before {
    // 这里是小三角
    background-color: rgba(7, 43, 84) !important;
  }
}
:deep(.ant-select-selector) {
  background-color: transparent !important;
  color: #009dff !important;
  border: none !important;
}

:deep(.ant-select-arrow) {
  color: #009dff !important;
}
:deep(.ant-segmented) {
  background-color: #042855 !important;
  color: #fff !important;
}
:deep(.ant-segmented-item-selected) {
  background-color: #042855 !important;
  color: #fff !important;
  font-weight: 1000 !important;
}
:deep(.monthTitle .ant-select-selector) {
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
}
</style>
